import * as mars3d from "mars3d"
import { toRaw } from 'vue';


export const useMarkerPoint = (_graphicLayer) => {
  let graphicLayer: any = null
  
  const Cesium = mars3d.Cesium
  const initBillboardEntity = () => {
    graphicLayer = toRaw(_graphicLayer.value); 

    const graphic = new mars3d.graphic.BillboardEntity({
      position: new mars3d.LngLatPoint(121.421587, 30.992581, 0),
      style: {
        image: "https://data.mars3d.cn/img/marker/lace-red.png",
        scale: 0.5,
        label: { text: "告警点位", pixelOffsetY: -20, font_size: 12, color: '#fff' },
        // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
        highlight: {
          scale: 1
        }
      },
      attr: { remark: "告警点位" }
    })
    graphicLayer.addGraphic(graphic)
    
    addDiffuseWall()
  }

  // 立体围墙扩散效果,圆状
  const addDiffuseWall = () => {
    const circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
      position: Cesium.Cartesian3.fromDegrees(121.421587, 30.992581, 0), // 圆中心点
      style: {
        diffHeight: 50, // 高度
        radius: 50, // 半径
        color: "#ff0000",
        speed: 30 // 速度
      },
      attr: { remark: "告警区域" }
    })
    graphicLayer.addGraphic(circleDiffuseWallGlow)
  }

  return {
    initBillboardEntity
  }
}